import changes from './changes.js';

const Render = {
  item(item) {
    return `<div class="item">
      <div class="timeline-desc">
        <div class="item-title">
          <a href="#"
            target="_blank"
            > v${item.version }</a>
        </div>
        <div class="update-time">${item.date}</div>
      </div>
      <div class="timeline-icon"></div>
      <div class="timeline-body">${item.content}</div>
    </div>`
  },

  list(list) {
    return list.map(item => {
      return `<li class="timeline-block">
            ${this.item(item)}
          </li>`;
    }).join('\n');
  },
};

const $ = ( selector, doc = document) => doc.querySelector( selector );

$('#timeline').innerHTML = Render.list(changes);